@charset "UTF-8";
/* 变量 */
body {
  font-family: Helvetica, sans-serif;
  color: #333;
  width: 400px;
  height: 200px;
}

/* 嵌套 */
.nav ul, .menu ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.nav ul li, .menu ul li {
  width: 400px;
  height: 200px;
  float: left;
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

.nav ul li a, .menu ul li a {
  text-decoration: none;
  color: blue;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.t-ov {
  text-overflow: ellepsis;
  overflow: hidden;
  white-space: nowrap;
}

.wrapper, .pic-list {
  width: 1000px;
  margin: 0 auto;
}

.td-n, .pic-list ul li a {
  text-decoration: none;
}

/* 继承 extend*/
.pic-list ul {
  margin-right: 20px;
}

.pic-list ul li {
  width: 300px;
  height: 200px;
  margin-right: -20px;
}

.pic-list ul li a {
  color: #333;
}

/* 导入 */
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* mixin */
.box-border {
  border: 1px solid #ccc;
  /* @include box-sizing(border-box); */
  -webkit-box-sizing: padding-box;
  -moz-box-sizing: padding-box;
  box-sizing: padding-box;
}

ul li a {
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color: #333;
}

.message, .sucess, .warning, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* 继承 */
.sucess {
  border-color: green;
}

.warning {
  border-color: orange;
}

.error {
  border-color: red;
}

/* 运算 */
.container {
  width: 100%;
}

.aticle {
  width: 66.66667%;
}

.aside {
  width: 700px;
  height: 600px;
}

/* 颜色 */
a {
  text-decoration: none;
  color: #08c;
}

a:hover {
  color: #006699;
}

.list li a {
  text-decoration: none;
  color: #08c;
}

.list li a:hover {
  color: #006699;
}
